<template>
  <div>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed />
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="150"
    >
      <!-- ArticleItem搜索详情项 -->
      <ArticleItem
        v-for="item in list"
        :key="item.art_id"
        :theAtrical="item"
        :showCross="false"
        @click.native="artClickFn(item.art_id)"
      ></ArticleItem>
    </van-list>
  </div>
</template>

<script>
import { searchResultAPI } from '@/api'
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  name: 'SearchResult',
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  created() {
    this.loading = true
    this.searchResult()
  },
  components: {
    ArticleItem
  },
  methods: {
    async searchResult() {
      const {
        data: { data }
      } = await searchResultAPI({ page: this.page, q: this.$route.params.keyword })
      this.loading = false
      console.log(data)
      if (data.results.length === 0) {
        this.finished = true
      } else {
        this.list = [...this.list, ...data.results]
      }
    },
    onLoad() {
      this.page++
      this.searchResult({ page: this.page, q: this.$route.params.keyword })
    },
    // 点击文章项显示详情
    artClickFn(id) {
      this.$router.push(`/articleDetail?article_id=${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
